<template>
    <div>
        <el-dialog title="登录" :visible.sync="loginVisible" width="300px" center>

            <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" class="demo-ruleForm">
                <el-form-item prop="userName">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid"
                              v-model="loginForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view"
                              v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onLogin" type="primary" size="medium" style="width: 100%">登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import usersAPI from "../utils/api/usersAPI";
export default {
  name: "Login",
  data() {
    let validate = (rule, value, callback) => {
      if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value)) {
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: "",
        password: ""
      },
      loginFormRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: validate, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validate, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    loginVisible: {
      get() {
        //获取vuex中的getShowLogin
        return this.$store.getters.getShowLogin;
      },
      set(value) {
        //把最新的值在更新到vuex中保持数据的一致性
        this.$store.commit("setShowLogin", value);
      }
    }
  },
  methods: {
    onLogin() {
      this.$refs.loginForm.validate(async valid => {
        //如果没有通过校验就返回
        if (!valid) return;
        //如果通过了校验那么就去发送登录请求
        let { data: res } = await usersAPI.login(this.loginForm);
        if (res.code !== "001") {
          this.$notifyError(res.msg);
        } else {
          //登录对话框隐藏
          this.loginVisible = false;
          //把当前用户的用户名存储到vuex中
          this.$store.commit("setUser", res.user);
          //把返回的信息存储到本次缓存
          window.localStorage.setItem("user", JSON.stringify(res.user));
          this.$notifySuccess(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
</style>